<template>
    <basic-container>
        <TitleComponent mainTitle="刷单商品" subTitle="列表" />
        <div class="tab_box">
            <span class="head">专区</span>
            <span class="tab_item" @click="changeTab(item, index)" v-for="(item, index) in tabs" :key="index"
                :class="{ active: currentIndex === index }">{{ item.label }} </span>
        </div>
        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" ref="crud" @row-del="rowDel" @on-load="onLoad">
            <template #zhuanqu-header="{ }">
                <span>专区 </span>
            </template>
            <template #link="{ }">
                <a style="color: #4e9876;" href="javascript:void(0);"> 点击</a>
            </template>
            <template #link-form="">
                <el-input v-model="crudData.form.link" style="max-width: 600px" placeholder="Please input"
                    class="input-with-select">
                    <template #prepend>
                        <img src="@/assets/ie.png" alt="">
                    </template>
                </el-input>
            </template>
            <template #menu-form="{ size }">
                <div class="btns_box">
                    <el-button icon="el-icon-delete" @click="handleEmpty">取消</el-button>
                    <div class="right_box">
                        <el-checkbox v-model="crudData.form.edit" label="继续编辑" size="large" />
                        <el-checkbox v-model="crudData.form.creat" label="继续创建" size="large" />
                        <el-checkbox v-model="crudData.form.view" label="查看" size="large" class="view_btn" />
                        <el-button icon="el-icon-user" type="primary" @click="handleSubmit">提 交</el-button>
                    </div>
                </div>
            </template>
        </avue-crud>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { ElMessage, ElMessageBox } from 'element-plus';
import { reactive, ref } from 'vue';
// import {getList} from "@/api/user/overview.js";
import TitleComponent from "@/components/title/index.vue";
const crud = ref('')

const tabs = ref([
    {
        label: 'Youtube',
        value: 'Youtube'
    },
    {
        label: 'TikTok',
        value: 'TikTok'
    },
    {
        label: 'Instagram',
        value: 'Instagram'
    },
    {
        label: 'Facebook',
        value: 'Facebook'
    }
])
const currentIndex = ref(0)
let option: any = reactive({
    rowKey: 'id',
    height: 'auto',
    // calcHeight: 100,
    searchShow: true,
    searchMenuSpan: 6,
    tip: false,
    border: true,
    index: false,
    viewBtn: false,
    editBtn: true,
    delBtn: true,
    addBtn: true,
    dialogWidth: '40%',
    menuFixed: 'right',
    labelWidth: 130,
    menu: true,
    selection: true,
    searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    indexWidth: 60,
    align: 'center',
    filterBtn:true,
    saveBtn:false,
    cancelBtn:false,
    column: [
        {
            label: "ID",
            prop: "ID",
            sortable: true,
            addDisplay:false,
            span: 24,
        },
        {
            label: "标签",
            prop: "biaoqian",

            hide: true,
            type: 'checkbox',
            dicData: [{
                label: '喜欢',
                value: 0
            }, {
                label: '订阅',
                value: 1
            }, {
                label: '分享',
                value: 2
            }],
            value: [0, 1, 2],
            span: 24,
            order:1,


        },
        {
            label: "商品分类",
            prop: "zhuanqu",
            type: 'select',
            order:2,
            
            dicData: tabs,
            span: 24,
            rules: [
                {
                    required: true,
                    message: '请输入专区',
                    trigger: 'blur',
                },
            ],
        },
        {
            label: "总量",
            prop: "zongliang",
            type: 'number',
            value:0,
            controlsPosition: 'top',
            span: 24,
        },
        {
            label: "剩余量",
            prop: "syl",
            value:0,

            type: 'number',
            controlsPosition: 'top',
            span: 24,
        },
        {
            label: "审核时间（小时）",
            prop: "shenhe",
            type: 'number',
            value:0,

            controlsPosition: 'top',
            span: 24,
        },
        {
            label: "链接",
            prop: "link",
            span: 24,
        },
        {
            label: "创建时间",
            prop: "creattime",
            type: 'datetime',
            hide: true,
            disabled: true,
            span: 24,
            addDisplay:false,

        },
        {
            label: "更新时间",
            prop: "time",
            disabled: true,
            type: 'datetime',
            sortable: true,
            addDisplay:false,
            span: 24,
        }
    ]
})
let crudData: any = reactive({
    loading: true,
    form: {
        edit: true,
        creat:"",
        view:"",
    },
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    data: []
})
const handleEmpty = () => {
    // crud.value.resetForm()
    crudData.form = {
        name: '',
        age: null
        // 其他字段
      };
    crud.value.$refs.form.clearValidate();
}
const handleSubmit = () => {
    crud.value.validate((valid: any, done: () => void, msg: any) => {
        console.log('11111',valid);
        if (valid) {
            
            ElMessage.success('操作成功');
            setTimeout(() => {
                done()
            }, 2000)
        }
    })
}
const changeTab = (item, index) => {
    currentIndex.value = index
}
// 序号按钮提交
const orderSubmit = (row: { visible: boolean; }) => {
    row.visible = false
    console.log('row====', row);
}
// 删除
const rowDel = (form, index, done) => {
    ElMessageBox.confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            ElMessage.success("删除成功");
            done(form); // 删除逻辑，此处暂未实现删除功能
        })
        .catch(() => { });
};

const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            ID: '6089',
            zhuanqu: 'Youtube',
            zongliang: '8000',
            syl: '7753',
            shenhe: '24',
            link: 'https://youtube.com/shorts/zzGstt26Bgs?feature=share',
            time: '2024-07-05 07:37:39',
            creattime: '2024-07-05 07:37:39'
        },
        {
            ID: '60891',
            zhuanqu: 'Youtube',
            zongliang: '8000',
            syl: '7753',
            shenhe: '24',
            link: 'https://youtube.com/shorts/zzGstt26Bgs?feature=share',
            time: '2024-07-04 07:37:39',
            creattime: '2024-07-05 07:37:39'

        },
    ]
    crudData.page.total = crudData.data.length;

    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //      crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss">
.tab_box {
    width: 100%;
    padding: 15px 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;

    .head {
        margin-left: 30px;
    }

    .tab_item {
        cursor: pointer;
        margin-left: 30px;

        &.active {
            color: #458769;
        }
    }
}
.btns_box{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .view_btn{
        margin-right: 20px;
    }
}
</style>